import React from 'react'
export class Footer extends React.Component {
  render() {
    const { list, itemFilter, type, clearCompleted } = this.props
    return (
      <>
        <footer className='footer'>
          <span className='todo-count'>
            <strong>{list.filter(item => !item.flag).length}</strong> item left
          </span>
          <ul className='filters'>
            <li>
              <a onClick={() => itemFilter('all')} className={type === 'all' ? 'all selected' : 'all'} href='#/'>
                All
              </a>
            </li>
            <li>
              <a onClick={() => itemFilter('active')} className={type === 'active' ? 'active selected' : 'active'} href='#/active'>
                Active
              </a>
            </li>
            <li>
              <a onClick={() => itemFilter('completed')} className={type === 'completed' ? 'completed selected' : 'completed'} href='#/completed'>
                Completed
              </a>
            </li>
          </ul>
          <button onClick={clearCompleted} className='clear-completed'>Clear completed</button>
        </footer>
      </>
    )
  }
}